<template>
	<view class="address_window_container">
		<u-popup mode="bottom" closeable round="24rpx" :show="visible" @close="handleColse">
			<view class="pop_content">
				<view class="mt_16 fc fc_666 fz_18">
					选择地址
				</view>
				<view class="mt_32 plr_16 height_210 flow_y">
					<view class="list_item fx fx_nw aic jcb flow_h" v-for="item,index in data" :key="index"
						@click="handleSelect(item)">
						<view class="fx fx_nw aic mr_10 ptb_12 flow_h">
							<uni-icons custom-prefix="iconfont" type="icon-weizhi-1" size="32rpx"></uni-icons>
							<view class="ml_14" :class="item.id==currentId?'fc_primary':''">
								<view class="">
									{{item.realName||''}}
									<text class="ml_8">{{item.phone||''}}</text>
								</view>
								<view class="mt_4">
									{{`${item.province}${item.city}${item.district}${item.detail}`}}
								</view>
							</view>
						</view>
						<u-icon name="checkmark" color="#FE5A1C" size="32" v-if="item.id==currentId"></u-icon>
					</view>
					<view class="mt_32" v-if="!data.length">
						<Empty type="address" />
					</view>
				</view>
				<view class="mt_12">
					<button class="custom_btn primary lh_44 fz_14 br_0" @click="handleAdd">选择其他地址</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import Empty from '@/components/Empty.vue'
	export default {
		components: {
			Empty
		},
		props: {
			data: {
				type: Array,
				default: () => ([])
			},
			currentId: {
				type: String || Number,
				default: null
			},
			visible: {
				default: false,
				type: Boolean
			},
		},
		data() {
			return {
				popVisible: false,
			}
		},
		methods: {
			// 关闭弹窗
			handleColse() {
				this.$emit('update:visible', false)
			},
			handleAdd() {
				uni.navigateTo({
					url: '/pages/person/pages/address'
				})
			},
			handleSelect(item) {
				this.$emit('update:visible', false)
				this.$emit('select', item)
			}
		},
	}
</script>

<style lang="scss">
	.address_window_container {
		.list_item {
			&+.list_item {
				border-top: 2rpx solid rgba(0, 0, 0, 0.1);
			}
		}
	}
</style>